<template>
  <div class="app-container">
    <el-card class="box-card" v-if="!pageLoading">
      <div slot="header" class="clearfix">
        <span>EhCache</span>
      </div>

      <el-row>
        <el-col :span="8" v-for="eState in models.ehcacheStateList" :key="eState.host">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>{{ eState.host }}</span>
            </div>

            <p>当前存活缓存总数：{{eState.cacheState.sum}}</p>
            <p>当前存活缓存大小：{{eState.cacheState.size}}</p>
          </el-card>
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px;">
        <el-col :span="24">
          <el-form inline>
            <el-row>
              <el-col :span="8">
                <el-form-item label="缓存名称：">
                  <el-select
                    name="cacheName"
                    v-model="models.cacheManageEhCache.cacheName"
                    placeholder="请选择"
                    @change="ehcacheSelect();"
                  >
                    <el-option value="全部">全部</el-option>
                    <el-option
                      v-for="item in controlData.ehcacheNames"
                      :key="item"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button @click="flashCache_removeAll('EHCACHE')">清除全部</el-button>
              </el-col>
              <el-col :span="8">
                <el-form-item label="key：">
                  <el-select v-model="models.cacheManageEhCache.key" placeholder="请选择">
                    <el-option v-for="item in ehcacheKeys" :label="item" :key="item" :value="item"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button @click="flashCache_remove('EHCACHE')">清除</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card" v-if="models.redisState" style="margin-top: 20px;">
      <div slot="header" class="clearfix">
        <span>Redis</span>
      </div>

      <el-row>
        <el-col :span="24">
          <p>Redis 当前存活缓存总数：{{models.redisState.sum}}</p>
        </el-col>
      </el-row>

      <el-form inline>
        <el-row>
          <el-col :span="24">
            <el-form>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="key：">
                    <el-input v-model="models.cacheManageRedis.key" placeholder="请输入key值"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-button @click="flashCache_remove('REDIS')">清除</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import Controller from "@/libs/framework/controller";
import request from "@/utils/request";
export default class Instance extends Controller {
  onBeforeInit() {
    this.urls = {
      model: "/admin/cacheManage/getListModel",
    };
  }

  mixin() {
    return {
      data() {
        return {
          ehcacheKeys: [],
          // cursorSate: false,//是否显示下拉列表
          // isShowList: false,//判断是点击内容隐藏光标的，还是点击空白隐藏光标的
        };
      },
      methods: {
        flashCache_remove: function (cacheType) {
          let loading = this.notifyInfo("正在执行...");
          request({
            url: "/admin/cacheManage/removeMain",
            method: "post",
            data: {
              cacheType: cacheType,
              action: "First",
              cacheName:
                cacheType == "EHCACHE"
                  ? this.models.cacheManageEhCache.cacheName
                  : "",
              key:
                cacheType == "EHCACHE"
                  ? this.models.cacheManageEhCache.key
                  : this.models.cacheManageRedis.key,
            },
          })
            .then((m) => {
              if (m && m.success) {
                this.models.ehcacheStateList = m.parameters.ehcacheStateList;
                this.models.redisState = m.parameters.redisState;
              }
              loading.close();
              this.notifyInfo(m.message);
            })
            .catch((e) => {
              loading.close();
              this.notifyError("服务出现异常，请稍后再试");
            });
        },
        ehcacheSelect: function () {
          if (this.models.cacheManageEhCache.cacheName == "全部") {
            return;
          }
          this.models.cacheManageEhCache.key = "";
          request({
            url: "/admin/cacheManage/getEhCacheKeys",
            method: "get",
            params: { name: this.models.cacheManageEhCache.cacheName },
          }).then((obj) => {
            this.ehcacheKeys = obj;
          });
        },
        flashCache_removeAll: function (cacheType) {
          let loading = this.notifyInfo("正在执行...");
          request({
            url: "/admin/cacheManage/removeAllMain",
            method: "post",
            data: {
              cacheType: cacheType,
              action: "First",
              cacheName:
                cacheType == "EHCACHE"
                  ? this.models.cacheManageEhCache.cacheName
                  : this.models.cacheManageRedis.key,
            },
          })
            .then((m) => {
              if (m && m.success == true) {
                this.models.ehcacheStateList = m.parameters.ehcacheStateList;
                this.models.redisState = m.parameters.redisState;
              }
              loading.close();
            })
            .catch((e) => {
              loading.close();
              this.notifyError("服务出现异常，请稍后再试");
            });
        },
      },
    };
  }
}
</script>

<style scoped lang="scss">
</style>
